<template>
  <div class="pro-no-data">
    <div class="empty">
      <n-card size="medium" class="card">
        <n-empty>
          <template #extra>
            <slot name="extra" />
          </template>
          <template #icon>
            <slot name="icon">
              <img :src="svg" alt="" style="width: 100%; height: 100%" />
            </slot>
          </template>
          <!-- description插槽 -->
          <template #default>
            <slot> {{ description }} </slot>
          </template>
        </n-empty>
      </n-card>
    </div>
  </div>
</template>

<script lang="ts" setup name="proNoData">
  import svg from '@/assets/colourSvg/noData.svg'
  defineProps({
    description: {
      type: String,
      default: '暂无数据'
    }
  })
</script>

<style lang="less" scoped>
  .pro-no-data {
    display: flex;
    justify-content: center;
    .empty {
      height: 200px;
      width: 400px;
    }
    :deep(.n-empty) {
      justify-content: flex-start;
      min-height: 80px;
      min-width: 80px;
      height: 100%;
      box-sizing: border-box;
    }
    :deep(.n-empty__icon) {
      width: 50%;
      height: 70%;
      text-align: center;
    }
    :deep(.n-card__content) {
      height: 100%;
      box-sizing: border-box;
    }
    :deep(.n-card) {
      height: 100%;
    }
    :deep(.n-empty__extra) {
      margin-top: 8px;
    }
  }
</style>
